<template>
	<div class="list allSearch">
		<div class="searchBox">
			<div class="btnBox">
				<el-button type="primary" size="mini" @click="search">搜索</el-button>
				<el-button type="primary" plain size="mini" @click="clearSearch">重置</el-button>
			</div>
			<div class="searchCon" :class="open_show?'hA':'h210'">
				<div class='field_item' v-for='(field,index) in fields' :key="index"
					v-if="field.header_search&&String(field.header_search)!='{}'&&((field.header_search.isHide&&!field.header_search.isHide(self))||!field.header_search.isHide)">
					<component :field="field"
						:optionData="field.header_search.optionsName?optionData[field.header_search.optionsName]:''"
						:defaultValue="field.header_search.defaultValue||field.header_search.defaultValue==0?field.header_search.defaultValue:''"
						:is="field.header_search.componentName"
						:fieldArguments="field.header_search?field.header_search:{}"
						@onChange="header_search_fieldChange">
					</component>
				</div>
			</div>
			<div class="open">
				<el-button type="primary" size="mini" @click="openShow">展开
					<i class="el-icon-arrow-up" v-if="open_show"></i>
					<i class="el-icon-arrow-down" v-else></i>
				</el-button>
			</div>
		</div>


		<div class="tableCon">
			<solely-table ref='solely-table' @onClickBtn="onClickBtn" @pageChange="pageChange"
				@filtersChange="filtersChange" @onSelectionChange="onSelectionChange" @initMainData="initMainData"
				:mainData='mainData' :Pagination="paginate" :BtnInfo="btn_info" :FieldList='fields'
				:optionData='optionData' :otherData='otherData' :BasicArguments="table_arguments">
				<template v-slot:mainImg="mainImg">
					<img style="width: 30px;float: left;" v-for="(item,index) in mainImg.data.mainImg" :key="index"
						:src="item['url']" />
				</template>
				<template v-slot:expand="expand">
					<div v-if="expand.data.reson">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="申请原因:">
								<div>{{ expand.data.reson }}</div>
							</el-form-item>
						</el-form>
					</div>
					<div v-if="expand.data.snap_address">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="收货地址信息:">
								<div>
									<div><span style="font-weight: bold;">姓名：</span>{{ expand.data.snap_address.name }}
									</div>
									<div><span style="font-weight: bold;">电话：</span>{{ expand.data.snap_address.phone }}
									</div>
									<div><span
											style="font-weight: bold;">地址：</span>{{ expand.data.snap_address.address }}{{ expand.data.snap_address.detail }}
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
					<div >
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="发货信息:">
								<div>
									<div><span style="font-weight: bold;">快递公司：</span>{{ expand.data.express_company }}
									</div>
									<div><span style="font-weight: bold;">快递单号：</span>{{ expand.data.express_no }}
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
					<div>
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="订单详情:">
								<div style="display: flex;background-color: #f5f5f5;">
									<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">商品图片</div>
									<div style="width:300px;text-align:center;border:1px solid #e1e1e1;">商品名称</div>
									<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">商品规格</div>
									<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">单价</div>
									<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">数量</div>
								</div>
								<div style="display: flex;line-height: 1.8;" v-for="(item,index) in expand.data.child"
									:key="index">
									<div
										style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
										<el-image style="width: 50px;margin: 10px;" :src="item.product_img"
											:preview-src-list="[item.product_img]">
										</el-image>
									</div>
									<div
										style="width:300px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
										{{item.product_title}}
									</div>
									<div
										style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
										{{item.title}}
									</div>
									<div
										style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
										{{ item.unit_price}}
									</div>
									<div
										style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
										{{ item.count }}
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</template>

			</solely-table>
		</div>

		<el-dialog :title="btnNow.text&&btnNow.text(originFormData)?btnNow.text(originFormData):''"
			:visible.sync="dialog.dialogFormVisible" :close-on-click-modal='false'>
			<div style="overflow:hidden;zoom:1;text-align: left;padding: 2%;">

				<template v-for='(field,index) in fields'>
					<div v-if="btnName&&field.application&& field.application.indexOf(btnName)>-1" :key="index"
						style="float: left;margin-right: 2%;margin-bottom:5%;padding-left: 1%;"
						:style="field.dialogStyle?field.dialogStyle:'width:47%'" :label-width="formLabelWidth">
						<div style="display: inline-block;min-width: 100px;text-align: left;font-weight: bold;">
							{{field.label}}：</div>
						<div style="display: inline-block;min-width: 225px;min-height: 50px;"
							:style="field.componentName=='tinymce-editor'?'width:85%':''">
							<component :field="field" :optionData="optionData[field.optionsName]"
								:defaultValue="formData[field.key]||formData[field.key]==0?formData[field.key]:''"
								:is="field.componentName || 'sls-input'" :fieldArguments="field.dialog?field.dialog:{}"
								@onChange="dialog_fieldChange">
							</component>
						</div>
					</div>
				</template>

			</div>
			<div slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<script>
	import torderJs from './torder.js'
	export default torderJs
</script>
<style>



</style>
